{% extends "base.html" %}

{% block title %}代理Proxy{% endblock %}

{% block head %}
{{ super() }}
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    代理Proxy
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li class="active">代理Proxy</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <!--表格1-->
      <div class="box">
        <!--        <div class="box-header">-->
        <!--          <h3 class="box-title">公共平台</h3>-->
        <!--        </div>-->
        <div class="box-body">
          <div class="layui-form">
            <div class="layui-inline">
                <input class="layui-input" name="ingress" id="ingress" placeholder="Ingress名">
            </div>
            <div class="layui-inline">
                <input class="layui-input" name="namespace" id="namespace" placeholder="命名空间">
            </div>
            <div class="layui-inline">
                <input class="layui-input" name="host" id="host" placeholder="域名">
            </div>
            <div class="layui-inline">
              <input class="layui-input" name="path_key" id="path_key" placeholder="路径">
            </div>
            <div class="layui-inline">
              <input class="layui-input" name="svc" id="svc" placeholder="服务">
            </div>
            &nbsp;&nbsp;
            <button class="layui-btn" id="search" data-type="reload">搜索</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="addBtn">
              新增Ingress
            </button>

          </div>
          <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->


<!-- Modal 编辑弹框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="editModalLabel">编辑Ingress</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="name" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-9">
              <p class="form-control-static" id="name"></p>
            </div>
          </div>
          <div class="form-group">
            <label for="ns" class="col-sm-2 control-label">命名空间</label>
            <div class="col-sm-9">
              <p class="form-control-static" id="ns"></p>
            </div>
          </div>
          <div class="form-group">
            <label for="rewrite" class="col-sm-2 control-label">目标改写</label>
            <div class="col-sm-9">
<!--              <p class="form-control-static" id="rewrite"></p>-->
              <input type="text" class="form-control" id="rewrite">
            </div>
          </div>

          <div class="form-group">
            <label for="rule_index" class="col-sm-2 control-label">规则编号</label>
            <div class="col-sm-9">
              <p class="form-control-static" id="rule_index"></p>
            </div>
          </div>
          <div class="form-group">
            <label for="domain" class="col-sm-2 control-label">域名</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="domain">
            </div>
          </div>

          <div class="form-group">
            <label for="path_index" class="col-sm-2 control-label">路径编号</label>
            <div class="col-sm-9">
              <p class="form-control-static" id="path_index"></p>
            </div>
          </div>
          <div class="form-group">
            <label for="path" class="col-sm-2 control-label">路径</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="path">
            </div>
          </div>
          <div class="form-group">
            <label for="back_svc" class="col-sm-2 control-label">后端服务</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="back_svc">
            </div>
          </div>
          <div class="form-group">
            <label for="back_port" class="col-sm-2 control-label">后端端口</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="back_port">
            </div>
          </div>


          <!-- /.box-body -->
        </form>

      </div>

      <div class="modal-footer">
        <!--        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->

        <button id="updateBtn" type="button" class="btn btn-primary"
                data-loading-text="<i class='fa fa-spin fa-spinner'></i>">更新
        </button>

      </div>
    </div>
  </div>
</div>


{% endblock %}


{% block script %}
<!-- Page specific script -->

<script type="text/html" id="cell">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <!--    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
    <!--    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
    <!--    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
  </div>
</script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
    var namespace, name, rule_index, path_index
    // 解析URL
    var pathName = window.document.location.pathname;
    var pathList = pathName.split("/")        // 例如 /cluster/ 被解析为 ['', 'cluster', '']
    console.log(pathList)
    var cluster_id = pathList[3]

    // 用于数据表格
    var data;

    layui.use('table', function () {
        var table = layui.table;

        // 方法级渲染
        var tableIns = table.render({
                elem: '#test'
                , id: 'table_id1'
                , url: '/api/v1/cluster/' + cluster_id + '/ingress/'
                , cellMinWidth: 70 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports']
                , cols: [[
                    {field: 'name', width: 200, title: 'Ingress名称', sort: true}
                    , {field: 'namespace', width: 200, title: '命名空间', sort: true}
                    , {field: 'host', width: 150, title: '域名', sort: true}
                    , {field: 'path', title: '代理路径', width: '30%', minWidth: 100, sort: true} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'back_svc', width: 200, title: '服务', sort: true}
                    , {field: 'back_port', width: 80, title: '端口', sort: true}
                    , {field: 'rewrite', width: 70, title: '改写'}
                    , {field: 'creat_time', width: 200, title: '创建时间', sort: true}
                    {% if session['role'] != 'user' %}
                    , {fixed: 'right', width: 120, title: '操作', toolbar: '#cell'}
                    {% endif %}
               ]]
                , done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res.data);
                    data = res.data;

                    //得到当前页码
                    console.log(curr);

                    //得到数据总量
                    console.log(count);
                }
    })
        ;

        var active = {
            reload: function () {
                //执行重载
                table.reload('table_id1', {

                    where: {
                        q_ingress: $('#ingress').val(),
                        q_namespace: $('#namespace').val(),
                        q_host: $('#host').val(),
                        q_path: $('#path_key').val(),
                        q_svc: $('#svc').val()
                    }
                }, 'data');
            }
        };

        $('#search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听工具条
        table.on('tool(test)', function (obj) {
            var d = obj.data;
            namespace = d.namespace
            name = d.name
            rule_index = d.rule_index
            path_index = d.path_index
            if (obj.event === 'del') {
                let t = '真的删除此代理？'
                layer.confirm(t, function (index) {
                    let url = "/api/v1/cluster/" + cluster_id + "/ingress/" + namespace + "/" + name + "/" + rule_index + "/" + path_index
                    $.ajax({
                        url: url,
                        type: "DELETE",
                        success: function (data) {
                            layer.msg('已删除');
                            obj.del();
                            layer.close(index);
                            tableIns.reload()
                        }
                    })


                });
            } else if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>' + JSON.stringify(d))
                // layer.msg('hello');
                $('#editModal').modal()
                $('#name').text(d.name)
                $('#ns').text(d.namespace)
                $('#rewrite').val(d.rewrite)
                $('#rule_index').text(d.rule_index)
                $('#domain').val(d.host)
                $('#path_index').text(d.path_index)
                $('#path').val(d.path)
                $('#back_svc').val(d.back_svc)
                $('#back_port').val(d.back_port)
            }
        });

        $('#updateBtn').click(function () {
            let $btn = $(this).button('loading');
            // business logic...
            let url = "/api/v1/cluster/" + cluster_id + "/ingress/" + namespace + "/" + name + "/" + rule_index + "/" + path_index
            $.ajax({
                url: url,
                contentType: "application/json;charset=utf-8",
                type: "PATCH",
                dataType: "json",
                data: JSON.stringify({
                    rewrite: $('#rewrite').val(),
                    host: $('#domain').val(),
                    path: $('#path').val(),
                    svc_name: $('#back_svc').val(),
                    svc_port: Number($('#back_port').val()),
                }),
                success: function (data) {
                    console.log(data)
                    $('#editModal').modal('hide')
                    tableIns.reload()
                    layer.msg('修改成功');
                }
            })
            $btn.button('reset')
        })

        $('#addBtn').click(function () {
            location.href = "/proxy/cluster/" + cluster_id + "/add"
        })
    });


</script>
{% endblock%}